<template>
  <div class="questionnaire">
    <Logo msg="满意度调查" />
    <div class="show-center" style="height:3px;background-color:#1da31d" />
    <div class="show-center" style="padding-left:30px;">
        <p>尊敬用户您好： </p>
        <p>为了给您提供更加完善的服务，我们希望收集并了解您在页面的使用情况。对您的配合和支持表示衷心的感谢！ </p>
    </div>
    <div class="show-center">
      <table  class="table-style">
        <tr class="tr-style">
          <th><span style="padding-left:10px;color:red;">*&nbsp;&nbsp;</span>您对网站整体满意度如何？</th>
        </tr>
        <tr class="tr-padding">
          <td class="td-padding">
            <a-radio-group v-model="value" @change="onChange">
              <a-radio :style="radioStyle" :value="1">
                非常满意
              </a-radio>
              <a-radio :style="radioStyle" :value="2">
                满意
              </a-radio>
              <a-radio :style="radioStyle" :value="3">
                一般
              </a-radio>
              <a-radio :style="radioStyle" :value="4">
                不满意
              </a-radio>
              <a-radio :style="radioStyle" :value="5">
                非常不满意
              </a-radio>
            </a-radio-group>
          </td>
        </tr>
      </table>
    </div>
    <div class="show-center">
      <table  class="table-style">
        <tr class="tr-style">
          <th style="padding-left:10px;">您有什么想法，请大声说出来吧！（例如：哪里有问题，哪些功能做得不够好等）</th>
        </tr>
        <tr class="tr-padding">
          <td class="td-padding">
            <a-textarea class="info-input" placeholder="请输入您的意见及建议" :rows="4" />
          </td>
        </tr>
      </table>
    </div>
    <div class="show-center">
      <table  class="table-style">
        <tr class="tr-style">
          <th style="padding-left:10px;">您的信息，以便我们更好的交流</th>
        </tr>
        <tr class="tr-padding">
          <td class="td-padding">
            <a-input class="info-input" placeholder="陈锦韬" addonBefore="姓名" /><br>
            <a-input class="info-input" placeholder="15015005581" addonBefore="手机" /><br>
            <a-input class="info-input" placeholder="guangxiwuzhou@163.com" addonBefore="邮箱" />
          </td>
        </tr>
      </table>
    </div> 
    <div class="show-center">
      <a-button @click="summit" style="width:250px;margin:auto;" type="primary" block>
        提交
      </a-button>   
    </div>
    <Footer />
  </div>
</template>
<script lang="ts">
import { defineComponent,ref, reactive ,watchEffect,watch} from "vue";
import Footer from "@/components/Footer.vue";
import Logo from "@/components/Logo.vue";
export default defineComponent({
components: {
    Footer,
    Logo,
},
  props: {
    value!: {
        type:String,
        default: "1"
    }
  },
setup: (props, context) => {
  const value = "1";
  const radioStyle = {
  };

  const onChange = (e) => {
     console.log('radio checked', e.target.value);
  };
  const closeWin = () =>{
    if (navigator.userAgent.indexOf('MSIE') > 0) { // close IE
       if (navigator.userAgent.indexOf('MSIE 6.0') > 0) {
          window.opener = null;
          window.close();
       } else {
          window.open('', '_top');
          window.top.close();
       }
    } else { // close chrome;It is effective when it is only one.
       window.opener = null;
       window.open('', '_self');
       window.close();
    }    
  }
  const summit = () =>{
    console.log('radio checked', value);
    closeWin();
  }
  const returnInfo = reactive({
    onChange,
    value,
    radioStyle,
    summit,
    closeWin,
  })
  return returnInfo;
},
})
</script>
<style scoped lang="less">
.questionnaire {
  width: 100%;
  height:100%;

}

.show-center {
    width: 70%; 
    margin-left: 15%;
    margin-bottom: 20px;
    font-size: 13px;
}
.show-center p {
    margin: 0px;
    font-size: 12px;
}
.table-style {
  border:1px solid #cce8ff;
  width: 100%;
}
.tr-style {
  background-color: #cce8ff;
  padding-left:10px;
}
.tr-padding {
  padding-left:30px;
  padding-top:20px;
}
.td-padding {
  padding:20px;
  padding-left:30px;
}
.info-input {
    max-width: 450px;
    margin-bottom: 10px;
}
</style>